<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0; padding:0;list-style-type:none;}
		.left_nav{
				position:fixed;
				top:150px;
				left:150px;
		}
		.left_nav>li{
			width:150px;
			height:150px;
			background:#ccc;
			text-align:center;
			line-height:150px;
			position:relative;
		}
		.left_nav>li>ul{
			width:600px;
			position:absolute;
			top:0;
			left:150px;
			display:none;
		}
		.left_nav>li:hover ul{
			display:block;
		}
		.left_nav>li>ul li{
			width:150px;
			height:150px;
			float:left;
		}
		.left_nav>li>ul>li:hover{
			background-color:#ccc;
		}

	</style>
</head>
<body>
	<nav class="left_nav">
		<li>items01
			<ul>
				<li>第一个</li>
				<li>第二个</li>
				<li>第三个</li>
				<li>第四个</li>
			</ul>
		</li>
		<li>items02
			<ul>
				<li>第一个</li>
				<li>第二个</li>
				<li>第三个</li>
				<li>第四个</li>
			</ul>
		</li>
		<li>items03
			<ul>
				<li>第一个</li>
				<li>第二个</li>
				<li>第三个</li>
				<li>第四个</li>
			</ul>
		</li>
		<li>items04
			<ul>
				<li>第一个</li>
				<li>第二个</li>
				<li>第三个</li>
				<li>第四个</li>
			</ul>
		</li>
	</nav>
</body>
</html>